<template>
	<view class="content">
		<u-navbar title="隐私设置"></u-navbar>
		<view class="content_main">
			<view class="content_main_item">
				<view class="content_tit">
					简历公开状态
				</view>
				<view class="u-flex u-row-between u-m-t-20">
					<view>
						简历公开
					</view>
					<u-switch v-model="data.is_display" active-color="#00d075" inactive-color="#F3F3F4"
						@change="onChange"></u-switch>

				</view>
			</view>
			<u-gap height="10" bg-color="#F9F8F6"></u-gap>
			<view class="content_main_item">
				<view class="content_tit">
					简历姓名显示
				</view>
				<u-radio-group class="u-m-t-20" wrap v-model="data.display_name">
					<u-radio @change="radioChange" v-for="(item, index) in data.list" :key="index" :name="item.value">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
			<u-gap height="10" bg-color="#F9F8F6"></u-gap>
			<view class="content_main_item">
				<view class="content_tit">
					屏蔽企业
				</view>
				<view class="content_main_item_ls">
					<view class="u-m-b-20 u-flex u-row-between" v-for="item in data.blacklist" :key="item.id">
						<view>{{item.companyname}}</view>
						<u-image src="/pages/pagesPersonal/static/personal/close.png" width="32" height="32"
							@click="deleteBlacklist(item.id)"></u-image>
					</view>
				</view>
			</view>
		</view>
		<view class="content_btn">
			<u-button shape="circle" plain :hair-line="false" :custom-style="data.customStyle" @click="toBlackSearch">
				<u-icon name="plus-circle" size="50" color="#00d075"></u-icon>
				<view class="u-m-l-10 u-font-36" style="color: #00d075;">
					添加屏蔽企业
				</view>
			</u-button>
		</view>
		<u-modal v-model="data.isResume" content="设置简历设置为保密后，任何企业都将无法搜索到您的简历，是否确认设置保密？" title="系统提示" show-cancel-button
			@confirm="confirm"></u-modal>

	</view>
</template>

<script setup>
	import {
		reactive
	} from "vue";
	import {
		onShow
	} from '@dcloudio/uni-app'
	const data = reactive({
		list: [{
				name: '实名显示（如：王昌明）',
				value: 1
			},
			{
				name: '匿名显示（如：王先生/女士）',
				value: 0
			}
		],
		// 简历是否公开
		is_display: false,
		isResume: false,
		// 简历姓名是否显示
		display_name: 1,
		// 屏蔽企业列表
		blacklist: [],
		customStyle: {
			border: '2rpx dashed #00d075',
			width: '100vw'
		}
	})
	onShow(() => {
		getPrivatesIndex()
	})
	// 跳转搜索企业页面
	const toBlackSearch = () => {
		uni.$u.route('pages/pagesPersonal/privacy/blackSearch')
	}
	// 删除屏蔽企业
	const deleteBlacklist = async (id) => {
		let params = {
			id
		}
		let res = await uni.$u.api.deleteBlacklist(params)
		uni.$u.toast('删除成功')
		data.blacklist.splice(
			data.blacklist.findIndex(
				item => parseInt(item.id) === parseInt(id)
			),
			1
		)
	}
	// 隐藏简历弹框确定事件
	const confirm = () => {
		data.is_display = !data.is_display
		changeResumeStatus()
	}
	// 开关
	const onChange = (value) => {
		if (!value) {
			data.isResume = true
			data.is_display = true
			return
		}
		changeResumeStatus()
	}
	// 修改简历公开状态
	const changeResumeStatus = async () => {
		let params = {
			display: data.is_display ? 1 : 0
		}
		let res = await uni.$u.api.setDisplay(params)
		uni.$u.toast('设置成功')
	}
	// 获取简历状态
	const getPrivatesIndex = async () => {
		let res = await uni.$u.api.getPrivatesIndex()
		data.is_display = res.is_display == 1 ? true : false
		data.display_name = res.display_name
		data.blacklist = res.blacklist
	}
	// 修改简历姓名显示状态
	const radioChange = async (e) => {
		let params = {
			display: e
		}
		let res = await uni.$u.api.setDisplayName(params)
		uni.$u.toast('设置成功')
	}
</script>

<style lang="scss" scoped>
	.content {
		&_tit {
			color: #101010;
			font-size: 32rpx;
		}

		&_btn {
			position: fixed;
			bottom: 0;
			/* #ifdef MP-WEIXIN */
			padding-bottom: env(safe-area-inset-bottom);
			/* #endif */
			left: 0;
			right: 0;
			margin: auto;
			padding: 0 38rpx;
			background-color: #fff;
			height: 140rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}

		&_main {
			padding: 0 24rpx;
			color: #8A8888;
			font-size: 26rpx;

			&_item {
				padding: 30rpx;

				:deep(.u-radio) {
					flex-direction: row-reverse;
					justify-content: space-between;
				}

				:deep(.u-radio__label) {
					margin: 0 !important;
					color: #8A8888;
				}

				&_ls {
					padding-top: 20rpx;
					padding-bottom: 150rpx;
				}
			}
		}

	}
</style>